import React,{Component} from 'react';
import {Route} from "react-router-dom";
import { Flex, WhiteSpace } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import "../../Style/fund.css";

import Search_top from "../../components/Search/search";
import Fund_function1 from "../../components/Fund_function/fund_function1";
import Fund_function2 from "../../components/Fund_function/fund_function2";
import Fund_function3 from "../../components/Fund_function/fund_function3";
import Fund_info1 from "../../components/Fund_info/fund_info1";
import Fund_info2 from "../../components/Fund_info/fund_info2";
import Fund_info3 from "../../components/Fund_info/fund_info3";


export default class Fund extends React.Component{
    render() {
        const PlaceHolder = ({ className = '', ...restProps }) => (
            <div className={`${className} placeholder`} {...restProps}>block</div>
        );
        return(
            <div className="flex-container">
                <div className="box1">
                    <Search_top/>
                </div>
                <WhiteSpace size="lg" />
                <div className="box2">
                    <Flex className="f_f">
                        <Flex.Item
                            className="f_f_item"
                            onClick={() => {
                            window.location.href = '#/terran/fundrank'
                        }}>
                            <Fund_function1/>
                        </Flex.Item>
                        <Flex.Item
                            className="f_f_item"
                            onClick={() => {
                                window.location.href = '#/terran/fundtheme'
                            }}>
                            <Fund_function2/>
                        </Flex.Item>
                        <Flex.Item className="f_f_item"
                                   onClick={() => {
                                       window.location.href = '#/terran/fundschool'
                                   }}>
                            <Fund_function3/>
                        </Flex.Item>
                    </Flex>
                </div>
                <div className="box4">
                    <Flex className="f_i">
                        <Flex.Item className="f_i_item"><Fund_info2/></Flex.Item>
                    </Flex>
                </div>
                <div className="box5">
                    <Flex className="f_i">
                        <Flex.Item className="f_i_item"><Fund_info3/></Flex.Item>
                    </Flex>
                </div>
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
            </div>
        )
    };
};

